<template>
    <section class="mainSection"  style="min-width: 1068px;overflow-x: hidden;">
        <layout :isVertical="true" style="overflow-y: auto;" v-loading="loading">
            <layout layout="top" height="250px'">
                <layout style="padding:5px;">
                    <layout layout="center" class="shadowPanel noScrollSection">
                        <div style="padding-top: 10px;box-sizing: border-box;width:100%;text-align: left;padding-left:16px;font-weight: bold;height:40px;line-height:40px;vertical-align: baseline">
                            <img src="../../imgs/cinema.png" />
                            <span style="margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;">{{findByPropertyCodeList.cinemaNameCn}}</span>
                        </div>
                        <div style="font-size: 13px;padding: 10px 30px;line-height: 30px;">
                            <el-row>
                                <el-col :span="3" style="color:#666;font-weight:bold;">
                                    专资编码:
                                </el-col>
                                <el-col :span="5">
                                    {{findByPropertyCodeList.cinemaCode}}
                                </el-col>
                                <el-col :span="3" style="color:#666;font-weight:bold;text-align: right;padding-right:20px;">
                                    厅数:
                                </el-col>
                                <el-col :span="13">
                                    {{findByPropertyCodeList.hallNum}}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" style="color:#666;font-weight:bold;">
                                    联系人:
                                </el-col>
                                <el-col :span="5">
                                     {{findByPropertyCodeList.contactNameOne}}
                                </el-col>
                                <el-col :span="3" style="color:#666;font-weight:bold;text-align: right;padding-right:20px;">
                                    院线:
                                </el-col>
                                <el-col :span="13">
                                    {{findByPropertyCodeList.chain}}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3" style="color:#666;font-weight:bold;">
                                    联系电话:
                                </el-col>
                                <el-col :span="5">
                                    {{findByPropertyCodeList.phoneOne}}
                                </el-col>
                                <el-col :span="3" style="color:#666;font-weight:bold;text-align: right;padding-right:20px;">
                                    地址:
                                </el-col>
                                <el-col :span="13">
                                    {{findByPropertyCodeList.address}}
                                </el-col>
                            </el-row>
                        </div>
                    
                    </layout>
                    <layout layout="aside" style="margin-left:10px;" width="400px" class="shadowPanel">
                        <div style="padding-top: 10px;box-sizing: border-box;width:100%;text-align: left;padding-left:16px;font-weight: bold;height:40px;line-height:40px;vertical-align: baseline">
                            <img src="../../imgs/cinema.png" />
                            <span style="margin-left:5px;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;">TMS中控室</span>
                            <div style="float:right;margin-right:20px;">
                                <el-tag :type="findByPropertyCodeList.onLine==true?'success':'warning'">{{getIsOnLine(findByPropertyCodeList)}}</el-tag>
                            </div>
                        </div>
                        <div style="font-size: 12px;padding: 10px 30px;line-height: 30px;">
                            <div>
                                <span style="color:#666;font-weight:bold;margin-right:10px;padding:5px;">软件版本与服务串号:</span>
                                <span> {{findByPropertyCodeList.tms[0].softVer}} ({{findByPropertyCodeList.tms[0].serverSn}})</span>
                            </div>
                            <div>
                                <span style="color:#666;font-weight:bold;margin-right:10px;padding:5px;">IP与网关:</span>
                                <span>TMS {{findByPropertyCodeList.tms[0].manageIp+':'+findByPropertyCodeList.tms[0].port}} ,vpn网关:{{findByPropertyCodeList.tms[0].vpnIp}}</span>
                            </div>
                            <div>
                                <span style="color:#666;font-weight:bold;margin-right:10px;padding:5px;">服务起始日期:</span>
                                <span>{{findByPropertyCodeList.tms[0].serverInstallDate}}至{{findByPropertyCodeList.tms[0].serverEndDate}}</span>
                            </div>
                        </div>
                    
                    </layout>
                </layout>
            </layout>
            <layout layout="top" height="250px'" style="margin-top:15px;background: #fff;border-radius: 12px;padding:15px;"  v-for="(item, key, index) in detailCodeList" :key="index">
                
    <!-- {{index}}: {{key}}: {{item}} -->
                <el-row >
                    <el-col :span="24">
                        <div class="grid-content bg-purple" style="height:40px;line-height: 40px;vertical-align: baseline;text-align: left">
                            <!-- <img src="../../imgs/hallIcon.png" /> -->
                            <span style="margin-left:5px;font-weight:bold;line-height: 10px;vertical-align: bottom;height: 30px;display: inline-block;">{{key}}</span>
                        </div>
                    </el-col>
                </el-row>
                <!-- {{item}} -->
                <div>
                <ul class="shadowClear" >
                    <!-- {{index}}: {{key}}: {{row}} -->
                    <li class="left"  v-for="(row, key, index) in item" :key="index">
                        <div class="shadowPanel noScrollSection" v-if="row.deviceTypeEnName=='Server'">
                            <div>
                                <div class="grid-content bg-purple" style="height:50px;line-height: 50px;vertical-align: baseline;text-align: center;background: #F5F5F5;">
                                    <img src="../../imgs/serverIcon.png" v-if="row.onLine==false"/>
                                    <img src="../../imgs/serverIcong.png" v-else/>

                                    <span style="margin-left:15px;font-weight:bold;line-height: 15px;vertical-align: bottom;height: 30px;display: inline-block;">{{row.deviceTypeName}}</span>
                                </div>
                            </div>
                            <div style="font-size:12px;width: 100%;margin-top: 2px;"></div>
                            <div style="background: #F5F5F5;">
                                <div style="font-size:12px;height:130px;padding: 0 10px;">
                                    <div style="text-align: left;height:40px;line-height: 40px;font-weight: bold;">
                                        <span style="color:#999;">当前工作状态: </span><span style="margin-left:20px;" v-if="row.state!=null">{{row.state}}</span><span v-else>暂无数据</span>
                                    </div>
                                    <div style="text-align: left;line-height: 30px;height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                          <el-tooltip class="item" effect="dark" :content="row.showName" placement="top">
                                           <!-- <el-button class="button_tip" v-if="scope.row.roleName==undefined ">{{scope.row.posHallNo}}</el-button> -->
                                            <span class="button_tip">{{row.showName}}</span>
                                            </el-tooltip>
                                        
                                    </div>
                                    <div style="display:inline-block;line-height: 30px;height: 30px;width: 100%;">
                                        <div style="display:inline-block;width:48%;text-align:left" class="duration">本片已播时长:{{getPlayedTime(row.playedDuration)}} </div>
                                        <div style="display:inline-block;width:50%;text-align:right" class="duration">本片剩余时长:{{totalDuration(row)}}</div>
                                    </div>
                                    <div style="line-height: 30px;height: 30px;">
                                        <el-progress :text-inside="true" :stroke-width="18" :percentage="gteProgress(row)"></el-progress>
                                    </div>
                                </div>
                                <div style="font-size:12px;width: 100%;height: 2px;border: 1px dashed #616161;"></div>
                                <div style="height:168px">
                                    <div style="font-size: 12px;padding: 10px 10px;line-height: 30px;">
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                产品及序列号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.deviceCatName}}<span v-if="row.deviceSn!=''">({{row.deviceSn}})</span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                软件:
                                            </el-col>
                                            <el-col :span="16">
                                                <span>{{row.osVersion}}</span>
                                                <span>{{row.softwareVersion}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                硬件:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.softwareVersion}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                CPU型号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.processorType1}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                内存情况:
                                            </el-col>
                                            <el-col :span="16">
                                                
                                                总空间:<span v-if="row.memTotal!=null">{{row.memTotal}}</span><span>0</span>,可用空间:<span v-if="row.memFree!=null">{{row.memFree}}</span><span>0</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div class="shadowPanel noScrollSection" v-if="row.deviceTypeEnName=='Projector'">
                            <div class="grid-content bg-purple" style="height:50px;line-height: 50px;vertical-align: baseline;text-align: center;background: #F5F5F5;">
                                <img src="../../imgs/showIcon.png" v-if="row.onLine ==false"/>
                                <img src="../../imgs/showIcong.png" v-else/>

                                <span style="margin-left:15px;font-weight:bold;line-height: 15px;vertical-align: bottom;height: 30px;display: inline-block;">{{row.deviceTypeName}}</span>
                            </div>
                            <div style="font-size:12px;width: 100%;height: 2px;"></div>
                            <div style="background: #F5F5F5;">

                                <div style="font-size:12px;height: 130px;padding: 0 10px;">
                                    <div style="text-align: left;height:40px;line-height: 40px;color:#999;font-weight: bold;">
                                        当前工作状态
                                    </div>
                                    <div style="line-height: 30px;height: 90px;width: 100%;text-align: center;font-weight: bold;">
                                        <div v-if="row.onLine == true">网络在线</div>
                                        <div v-else-if="row.onLine == false">网络不在线</div>
                                        <div>{{row.douserStatus}}</div>
                                        <div>{{row.lampStatus}}</div>
                                    </div>
                                </div>
                                <div style="font-size:12px;width: 100%;height: 2px;border: 1px dashed #616161;"></div>
                                <div style="height:168px">
                                    <div style="font-size: 12px;padding: 10px 10px;line-height: 30px;">
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                产品及序列号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.deviceCatName}} <span v-if="row.deviceSn!=''">({{row.deviceSn}})</span>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                放映机型号:
                                            </el-col>
                                            <el-col :span="16">
                                            {{row.deviceCatName}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                灯泡型号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.lampArticleNumber}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                灯泡序列号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.lampSerialNumber}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12" style="color:#666;font-weight:bold;">
                                                灯泡运行/告警/自动关机时间:
                                            </el-col>
                                            <el-col :span="12">
                                                <span v-if="row.lampRunTime!=''&&row.warn!=''&&row.shutdown!=''">{{row.lampRunTime}}h/{{row.warn}}h/{{row.shutdown}}h/</span>
                                                <!-- <span v-if="row.warn!=''">{{row.warn}}h/</span>
                                                <span v-if="row.shutdown!=''">{{row.shutdown}}h/</span> -->
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="shadowPanel noScrollSection" v-if="row.light!=undefined " style="height: 100%;">
                            <div class="grid-content bg-purple" style="height:50px;line-height: 50px;vertical-align: baseline;text-align: center;background: #F5F5F5;">
                                <img src="../../imgs/lightIcon.png" v-if="row.onLine ==false"/>
                                <img src="../../imgs/lightIcong.png" v-else/>

                                <span style="margin-left:15px;font-weight:bold;line-height: 15px;vertical-align: bottom;height: 30px;display: inline-block;">光源</span>
                            </div>
                            <div style="font-size:12px;width: 100%;height: 2px;"></div>
                            <div style="background: #F5F5F5;">

                                <div style="height: 300px;">
                                    <div style="font-size: 12px;padding: 10px 10px;line-height: 30px;">
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                放映机型号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.projector}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                光源型号:
                                            </el-col>
                                            <el-col :span="16">
                                            {{row.light}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                光源串号:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.lightSN}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                IP:
                                            </el-col>
                                            <el-col :span="16">
                                                {{row.lightIp}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                授权结束日期：:
                                            </el-col>
                                            <el-col :span="16">
                                                到期时间 {{row.endDate}}
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="8" style="color:#666;font-weight:bold;">
                                                授权剩余小时数 :
                                            </el-col>
                                            <el-col :span="16">
                                               剩余授权时长 {{row.hourleft}} h
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                  
                </ul>
                </div>
            </layout>
        </layout>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './cinemaWatchDetail.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
@Component
export default class cinemaShowWatch extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';
    findByPropertyCodeList = {};
    online = false;
    detailCodeList={};
    constructor(){
        super();

    };
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }

    searchList(){
        // let params = {
        //     page: this.page,
        //     pageSize: this.pageSize,
        //     status: 0,
        //     cinemaName: this.cinemaName,
        //     cinemaCode: this.cinemaCode,
        // }
        // //console.log(params)

        this.data = [];
        let list = [];
        for(let i=0;i<30;i++){
            list.push({
                id: i,
                name : '影厅名称' + i,
                cinemaName : (i+1)+'号厅' ,
                playDate: '2021-11-18',
                playTime: '08:00~10:00',
                totalTime: '02:00:00',
                movie: 'ShengXiaWeiLai-2D_185_JP_115M_PTH_51_0721',
                status: '放映中',
            });
        }

        this.data = list;

        this.total = this.data.length;
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(){

    }
    getPlayedTime(row) {
            if(row!=undefined) {
                let result = parseInt(row)
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
                let res = '';
                if(h !== '00') res += `${h}时`;
                if(m !== '00') res += `${m}分`;
                res += `${s}秒`;
                return res
            } else {
                return '0:0:0'
            }
        }
        totalDuration(row) {
            if(row.totalDuration!=undefined&&row.playedDuration!=undefined) {
                let time  = row.totalDuration - row.playedDuration;
                let result = parseInt(time)
                let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
                let res = '';
                if(h !== '00') res += `${h}时`;
                if(m !== '00') res += `${m}分`;
                res += `${s}秒`;
                return res
            } else {
                return '0:0:0'
            }
        }
    getTime(row,num) {
        if(typeof row.playedDuration != 'undefined') {
           if(num == 1) {
            let res = parseInt(row.totalDuration) - parseInt(row.playedDuration);
            return moment(res).format('HH:mm:ss')
            } else if(num == 2) {
                return moment(row.playedDuration).format('HH:mm:ss')
            } 
        } else {
            return '0:0:0';
        }
        
    }
    gteProgress(row){
        // //console.log(row,'服务进度haha',row,'服务天数');
        //     if(row.totalDuration==undefined&&row.playedDuration==undefined) {
        //     return 0
        // }
        // let time  = parseInt(row.totalDuration) - parseInt(row.playedDuration);
        // let result = parseInt(time)
        // return (parseInt(100)-(Math.round(result) /100.00)).toFixed(2)
        if(row.totalDuration==undefined&&row.playedDuration==undefined ||row.playedDuration=='0') {
                 //console.log(row,'服务进度haha',row,'服务天数');
                return 0
            }
            // if(row.playedDuration=='0') {
            //     return 0
            // }
            // let time  =  parseInt(row.playedDuration)/(parseInt(row.totalDuration) + parseInt(row.playedDuration));
            //  let time  = parseInt(row.totalDuration) - parseInt(row.playedDuration);
            // let result = parseInt(time)
            //  if(result<100&&result>0) {
            //     return Math.abs((parseInt(10)-(Math.round(result) /row.playedDuration / row.totalDuration ))).toFixed(2)
            // } 
            // if(result == 0) {
            //     return 100
            // }
            // return Math.abs((parseInt(100)-(Math.round(result) /row.playedDuration / row.totalDuration ))).toFixed(2)
            // let time  = ((parseInt(row.totalDuration) - parseInt(row.playedDuration))/100.00);
            // if(time == 0) {
            //     return 100
            // }
            // return Math.abs(100-time).toFixed(2)
             return ((parseInt(row.playedDuration) / parseInt(row.totalDuration ))*100).toFixed(2)

    }
    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
    getIsOnLine(row) {
        if(row == undefined) {
            return '离线'
        }
        if(row.onLine) {
            return '在线'
        } else{
            return '离线'
        }
    }
    findByPropertyCode() {
let findByPropertyCode = JSON.parse(window.localStorage.getItem('findByPropertyCode')) 

        let parames = findByPropertyCode.cinemaCode;
        Service.findByPropertyCode(parames).then((res) =>{
            //console.log(res)
            if(res.succeeded){
                this.findByPropertyCodeList = res.data
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        });
    }
    workState(parames,list) {
        Service.workState(parames).then((res) =>{
            if(res.data.succeeded){
                // this.detailCodeList = res.data.data;
                //console.log(res.data.data)
                for(let item in res.data.data) {
                    for(let itemList in list) {
                        if(item === itemList) {
                            //console.log(res.data.data[item],list[itemList])
                            for(let items in res.data.data[item]) {
                                for(let child of list[itemList]) {
                                    if(items ==child.deviceSn) {
                                        //console.log(items,child.deviceSn,res.data.data[item][items])
                                        // this.detailCodeList
                                        var childData =  Object.assign(child,res.data.data[item][items])
                                        //console.log(childData,child)
                                        // list[itemList].push(res.data.data[item][items])
                                    }
                                }
                            }
                            
                        }
                    }
                }
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        });
    }
    detail() {
let findByPropertyCode = JSON.parse(window.localStorage.getItem('findByPropertyCode')) 

        let parames = {
            cinemaCode:findByPropertyCode.cinemaCode
        };
        this.loading=true;
        Service.detail(parames).then((res) =>{
            if(res.data.succeeded){
                this.detailCodeList = res.data.data;
                this.loading=false;
                this.workState(parames,res.data.data)
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
                this.loading=false;
            }
        });
    }
    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        this.findByPropertyCode();
        this.detail()
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
.grid-content {
    position: relative;
    img {
        position: absolute;
        left: 14px;
        width: 40px;
        height: 40px;
        top: 6px;
    }
}
.shadowClear {
    width: 100%;
    .left {
        float: left;
        width: 31%;
        margin-left: 18px;
        margin-bottom: 10px;
    }
}
 @media only screen and (max-width: 1280px) {
     .duration {
        width: auto !important;
     }
 }
</style>